<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_015_自定义指令</title>

</head>
<body>
    <div id="app">
      这里模拟anaj（方便测试，就不提供接口了）<br /> 
      <!-- lazy指令作用：将输入框的事件（发生变化时触发）改为事件（失去焦点时触发） -->
      输入用户名：<input type="text" v-model.lazy="userName" />
      <span v-text = "tishi"></span>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">

        
        var vm = new Vue({
            el:'#app',
            data:{
                userName:"",
                tishi:""
            },
            methods:{
                checkUserName:function(userName,uName){
                    if(userName == uName){
                        return "用户名重复，不可以使用"
                    }else{
                        return  "可以使用";
                    }
                    
                }
            },
            watch:{
                //监听userName,注意：监听的名字要和上面的数据data保持一致，参数val表示：当前属性值的最新值
                userName:function(val){
                    // var that = this;
                    // that.tishi = that.checkUserName(val,"admin");
                    this.tishi = this.checkUserName(val,"admin");
                }
            }

           
        });

    </script>
</body>

</html></SCRIPT>